<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
        var config = {
            'server' : 'ws://127.0.0.1:9501',
        };

        var ws = {};

        $(document).ready(function () {
            ws = new WebSocket(config.server+'?uid=1');
            listenEvent();
        });

        function listenEvent() {
            /**
             * 连接建立时触发
             */
            ws.onopen = function (e) {
                //连接成功
                console.log("connect webim server success.");
                //发送登录信息

                ws.send(JSON.stringify({
                    cmd : 'test',
                    args : {
                        id : 3,
                        name: '哈哈'
                    }
                }));
            };

            //有消息到来时触发
            ws.onmessage = function (e) {
                console.log(e);
                var message = JSON.parse(e.data);
                $(document.body).html("<h1 style='text-align: center'>"+message.info+"</h1>");
            };

            /**
             * 连接关闭事件
             */
            ws.onclose = function (e) {
                $(document.body).html("<h1 style='text-align: center'>连接已断开，请刷新页面重新登录。</h1>");
            };

            /**
             * 异常事件
             */
            ws.onerror = function (e) {
                $(document.body).html("<h1 style='text-align: center'>服务器"+
                    ": 拒绝了连接. 请检查服务器是否启动. </h1>");
                console.log("onerror: " + e.data);
            };
        }
</script>
</body>
</html>